<template>
  <div>
    <header>
      <slot
        name="header"
        style="
           {
            background: col;
          }
        "
      ></slot>
    </header>
    <main>
      <ul>
        <li v-for="(item, index) in data1" :key="item">
          {{ item }}======={{ item }}
          <slot name="main" :num="index"></slot>
        </li>
      </ul>
    </main>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {};
  },
  props: {
    data1: {
      type: Array,
    },
    col: {
      type: String,
      default: "red",
    },
  },
  created() {},
  computed: {},
  methods: {},
};
</script>
<style lang='less'  scoped>
header {
  width: 100%;
}
ul li {
  width: 100%;
}
</style>
